<template>
    <div>
        <!-- 搜索菜单 -->
        <!-- <search></search> -->
        <div class="navbox">
            <div class="header">
              <router-link to="/newcategory" tag="div" class="left-icon">
                <span class="iconfont icon-list-copy"></span>
              </router-link>
              <div class="centre-inp" @click="$router.push('/searchList')">
                <input type="text" placeholder="鞋子" />
                <span class="iconfont icon-soushuo1"></span>
              </div>
              <div class="right-icon" @click="$router.push('/shoppingCar')">
                <span class="iconfont icon-xiaoxi"></span>
              </div>
            </div>
        <div class="afterSale">
            <div>全国包邮</div>
            <div>延误必赔</div>
            <div>上门取件</div>
            <div>退货补运费</div>
        </div>
        <!-- 分类导航 -->
        <div class="fenlei">
            <ul>
                <li v-for="(item,index) in classificationNav" :key="index" @click="goGoodsList(item.nav_name)">
                    <div class="Imgs">
                        <img :src="item.nav_Imgurl" alt="">
                    </div>
                    <div>{{item.nav_name}}</div>
                </li>
            </ul>
        </div>
        </div>
        <!-- 活动栏 -->
        <div class="activites">
            <div class="act-item" v-for="(item,index) in imgblock" :key="index" :style="'background: url('+item.activites_Url+') no-repeat 0 0;background-size:100%'">
            <p class="title">{{item.title}}</p>
            </div>
        </div>
        <!-- 商品展示 -->
        <div class="shopping">
            <div class="title-img">
                <img src="../assets/img/like.webp" alt="">
            </div>
            <div class="content">
                <ul>
                    
                    <li v-for="(item,index) in goods" :key="index" @click="goDetail(item.goods_id)">
                        <div class="shopping-img">
                            <img :src="item.goods_small_logo" alt="">
                        </div>
                        <div class="message">
                            <div class="shopping-name">
                                {{item.goods_name}}
                            </div>
                            <div class="pin-info-price">
                                <div class="price">{{item.goods_price}}</div>
                                <div class="collect">
                                    <span class="iconfont icon-shoucang"></span>
                                    {{ Math.floor((Math.random()*1000)+1) }}
                                </div>
                            </div>
                            <div class="btn_box">
                                <button>立即购买</button>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import axios  from "axios";
// import search from "../components/comm/search"
let mallData = require("../../static/json/mall.json")
export default {
    data() {
        return {
            imgblock:[], // 秒杀
            classificationNav:[], // 分类导航
            goods:[], // 商品
        }
    },
    methods:{
        api(){
            return "https://api-hmugo-web.itheima.net/api/public/v1/goods/search?";
        },
        // 秒杀
        getActivites(){
            this.imgblock = mallData.activites
        },
        // 分类
        getFenlei(){
            this.classificationNav = mallData.fenlei
        },
        // 商品
        getGoods(){
            // this.goods = mallData.goods
            axios
              .get(this.api()+'query=女装')
              .then(data => {
                  let goods = data.data.message.goods
                  this.goods = goods.filter(item=>{
                      return item.goods_small_logo != ""
                  })
              })
              .catch(function (error) {
                console.log(error);
            });
        },
        goDetail(id){
            this.$router.push({name:'Details',query: {goods_id:id}})
        },
        goGoodsList(navName){
            this.$router.push({path:"/goodslist",query:{name:navName}})
        }
        
    },
    created(){
        this.getActivites()
        this.getFenlei()
        this.getGoods()
    },
    filters:{
        price:(value)=>{
            return "￥" + value
        }
    },
    // components:{
    //     search
    // }
}
</script>

<style lang="less" scoped>
    // 商品展示
    .shopping{
        .title-img{
            img{
                width: 100%;
            }
        }
        .content{
            ul{
                overflow: hidden;
                padding-right: 15px;
                li{
                    width: 296px;
                    float: left;
                    height: 532px;
                    background: #fff;
                    margin: 15px 0px 0px 15px;
                    .shopping-img{
                        height: 396px;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .message{
                        width: 276px;
                        height: 119px;
                        padding:8px 10px;
                        .shopping-name{
                            color: #333;
                            font-size: 20px;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            overflow: hidden;
                        }
                        .pin-info-price{
                            height: 42px;
                            line-height: 42px;
                            .price{
                                line-height: 42px;
                                float: left;
                                font-size: 26px;
                                font-weight: bold;
                                color: #FF4466;
                                position: relative;
                                padding-left: 10px;
                                &::before{
                                    display: block;
                                    content: "￥";
                                    position: absolute;
                                    left: -6px;
                                    top: 2px;
                                    font-size: 18px;
                                    font-weight: bolder;
                                }
                            }
                            .collect{
                                float: right;
                                color: #666;
                                font-size: 20px;
                            }
                        }
                        .btn_box{
                            margin: 4px 0px;
                            button{
                                width: 100%;
                                height: 42px;
                                font-size: 22px;
                                color: #fff;
                                background: #FF5777;
                                border-radius: 6px;
                                border: none;
                            }
                        }
                    }
                }
            }
        }
    }
    // 活动栏
    .activites{
        padding: 15px;
        padding-right: 0px;
        display: flex;
        background: #FFFFFF;
        margin: 20px;
        border-radius: 10px;
        .act-item{
            flex: 1;
            margin-right: 15px;
            height: 140px;
            background: #e3e3e4;
            position: relative;
            .title{
                position: absolute;
                bottom: 10px;
                left: 0px;
                right: 0px;
                text-align: center;
                color: #FFFFFF;
                font-size: 24px;
                font-weight: 900;
            }
        }
    }
    .navbox{
        background: linear-gradient(rgba(255, 82, 114,1),30%, rgba(255, 82, 114,0));
        // 全国包邮
        .afterSale{
            display: flex;
            margin: 0px 20px;
            height: 50px;
            line-height: 50px;
            font-size: 16px;
            color: #fff;
            overflow: hidden;
            div{
                flex: 1;
                text-align: center;
                position: relative;
                &::after{
                    display: flex;
                    content: "";
                    width: 2px;
                    height: 10px;
                    background: #fff;
                    position: absolute;
                    right: -2px;
                    top: 20px;
                }
            }
        }
        // 搜索导航
        @heights:50px;
        .header{
            display: flex;
            height: @heights;
            padding: 12px 8px;
            border: none;
            .centre-inp{
                flex: 4;
                height: 100%;
                position: relative;
                color: #999;
                input{
                    outline: none;
                    border: none;
                    background: #eee;
                    width: 100%;
                    height: 100%;
                    text-indent: 3em;
                    font-size: 16px;
                    border-radius: 6px;
                }
                span{
                    position: absolute;
                    top: 50%;
                    left: 20px;
                    font-size: 20px;
                    margin-top: -12px;
                }
            }
            .left-icon,.right-icon{
                flex: 1;
                height: 100%;
                line-height: @heights;
                text-align: center;
                .iconfont{
                    font-size: 30px;
                    color: #fff;
                }
            }
        }
        // 分类导航
        .fenlei{
            ul{
                margin: 0px 20px;
                overflow: hidden;
                background: #FFFFFF;
                border-radius: 10px;
                li{
                    float: left;
                    width: 20%;
                    height: 122px;
                    padding: 8px 0;
                    text-align: center;
                    font-size: 22px;
                    color: #666;
                    .Imgs{
                        width: 85px;
                        height: 85px;
                        background: #e3e3e4;
                        border-radius: 50%;
                        margin: 0 auto;
                        overflow: hidden;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
        }
    }


</style>

